<template>
  <mavon-editor
      id="mavon-editor"
      v-model="markdownText"
      ref="md"
      @change="markDownTextChange"
      fontSize="16px">
    <template v-slot:right-toolbar-after>
      <el-tooltip content="使用富文本编辑" placement="bottom" effect="light" style="cursor: pointer" >
        <span @click="editorTypeChange">
          <svg-icon iconname="zhiran-iconzhuanhuan" ></svg-icon>
        </span>
      </el-tooltip>
    </template>
  </mavon-editor>
</template>

<script>
export default {
  name: "MarkDownEditor",
  data(){
    return{
      markdownText:'',
      html:'',
    }
  },
  methods:{
    markDownTextChange(value, render){
      this.html = render
      console.log(this.html)
    },
    editorTypeChange(){
      console.log("change被点击")
      this.$emit('editorTypeChange')
    },
  }

}
</script>

<style scoped>
#mavon-editor{
  min-height: 800px;
  margin: 20px auto;
}
</style>